<template>
  <div class="tab-con">
    <div class="newItems">
      <ul class="clearfix">
        <li
          v-for="(item,index) in planList"
          :class="{'active': hoverActive == index, 'active-click': active == index}"
          ref="tabList"
          @mouseleave="mouseover(index)"
          @mouseenter="mouse($event,item,index)"
          :key="index"
        >
          <span  @click.stop="goPathP(item, index)" class="value">{{item.name}}</span>
  
          <div
            class="hoverDiv"
            ref="hoverDiv"
           :style="{'width':120+'px','left':-item.left+'px'}"
          >
           <!-- :style="{'width':item.width+'px','left':-item.left+'px'}" -->
            <div class="cont">
              <div class="items">
                  <div  class="_item"
                    v-for="(hItem,hIndex) in item.children" :key="hIndex"
                    style="font-style: normal;"
                   >
                    <template >
                      <span class="title" v-if="!(hItem.hidden)"  @click.stop="goPath(hItem.path, index)">{{hItem.meta.title}}</span>
                    </template>
                  </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      routerList: [], //所有路由
      hoverActive: -1,
      planList: [],
      active: 0,
      tgKey: null,
    };
  },
   computed: {
    ...mapGetters(["permission_routers"]),
  },
  watch: {
   $route: {
      handler: function(val) {
        this.initMenu(val);
      },
      deep: true,
    },
     planList: {
      handler: function(val) {
        console.log(val)
        this.active = val.findIndex((item) => item.key === this.tgKey);
        console.log(this.active)
      },
      deep: true,
    },
  },
  // mounted() {
  //   const curRoute = this.$route;
  //   this.initMenu(curRoute);
  // },
  methods: {
     mouse(e, item, index) {
      this.hoverActive = index;
    },
     //移出
    mouseover() {
      if (this.hoverActive === -1) {
        return
      }
      this.hoverActive = -1;
    },
      goPathP(item, index){
      console.log(item,index)
      this.setKey(item.key);
      this.active = index;
      window.localStorage.setItem("menuIndex", index);
      this.$router.push({ path: item.path });
    },
    // 跳转
    goPath( item, index) {
      console.log(item,index)
      // this.active = index;
      // window.localStorage.setItem("menuIndex", index);
      // let goPath = path.resolve(a, b);
      // this.setKey(item.meta.key);
      this.$router.push({ path: item });
    },
    handleCommand(payload) {
      let targetParentRoute = null;
      this.planList.forEach(el => {
        if (el.children && el.children.find(item => item.name === payload.name)) {
          targetParentRoute = el;
        }
      });
      this.setKey(targetParentRoute.key);
      this.$router.push({ path: payload.path });
    },
    setKey(key) {
      console.log(key)
      this.$store.dispatch("moduleKey", key);
    },
    //初始化路由分配
   initMenu(val) {
      const matchRouteName = val.matched[0].name;
      const tgIndex = this.permission_routers.findIndex(
        (item) => item.name === matchRouteName
      );
      const tgKey = this.permission_routers[tgIndex].key;
      this.planList = this.permission_routers.filter(
        (item) => item.parentKey && item.parentKey.indexOf(tgKey) !== -1
      );
      this.tgKey = tgKey;
    },
  }
};
</script>

<style lang="scss" scoped>
.nav-list {
  flex: 1;
  height: 64px;
  ul {
    text-align: right;
    height: 64px;
    li {
      display: inline-block;
      color: #d7d8db;
      cursor: pointer;
      height: 64px;
      span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        padding: 0 20px;
        font-size: 14px;
        height: 64px;
      }
    }
    .active {
      background: #014274;
      color: #d7d8db;
      position: relative;
      &::before {
        content: "";
        width: 40px;
        height: 2.7px;
        background: #fff;
        position: absolute;
        bottom: 14px;
        left: 50%;
        margin-left: -20px;
      }
    }
  }
}
.tab-con {
  position: relative;
  height: 64px;
  flex: 1;
  display: flex;
  margin-left: 20px;
  .clibtn {
    position: absolute;
    top: 50%;
    margin-top: -9px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
  }
  .right {
    right: 16px;
    // background: rgba(82, 158, 239, 1) url("../../assets/left.png") no-repeat
      // center;
    background-size: 10px;
    transform: rotate(180deg);
  }
  .left {
    left: 16px;
    // background: rgba(82, 158, 239, 1) url("../../assets/left.png") no-repeat
      // center;
    background-size: 10px;
  }
  .isNone {
    display: none;
  }

  .tab-ul {
    position: relative;
    width: auto;
    // width: 850px;
    height: 100%;
    // margin: 0 42px;
    overflow: hidden;
    ul {
      float: right;
      // height: 100%;
      // position: absolute;
      // transition: 0.5s;
      li {
        float: left;
        color: #d9e6f3;
        opacity: 0.8;
        text-align: center;
        height: 64px;
        cursor: pointer;
        span {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-block;
          // padding: 0 2%;
          padding: 0 20px;
          font-size: 14px;
        }
        // &:hover {
          // background: #114b99;
          // background-color: #e4edfb;
          // height: 50px;
          // color: #3385ff;
        // }
      }
      .active {
        background: #4c5168;
        color: #ffffff;
        // background: #114b99;
        // span {
        //   // height: 47px;
        //   // border-bottom: 3px solid #3385ff;
        //   background-color: #e4edfb;
        //   height: 50px;
        //   color: #3385ff;
        // }
      }
    }
  }
}

//新导航
.newItems {
  margin-top: 4px;
  float: left;
  ul {
    li {
      display: flex;
      position: relative;
      text-align: center;
      height: 100%;
      color: #fff;
      float: left;
      cursor: pointer;
      .value {
        flex: 1;
        font-size: 16px;
        margin-right: 35px;
      }
      .icon {
        line-height: 64px;
        margin-right: 35px;
        margin-left: 5px;
        font-size: 10px;
      }

      .hoverDiv {
        position: absolute;
        left: -20px;
        top: 60px;
        z-index: 99999;
        height: initial;
        background: #fff;
        display: none;
        box-sizing: border-box;
       
        &::before {
          display: block;
          content: "";
          border-width: 8px 8px 8px 8px;
          border-style: solid;
          border-color: transparent transparent #fff transparent;

          /* 定位 */
          position: absolute;
          left: 50%;
          margin-left: -8px;
          top: -16px;
        }
        .cont {
          position: relative;
          width: 100%;
          overflow: hidden;
          background: rgba(255, 255, 255, 1);
          padding: 15px 12px;
          box-sizing: border-box;
          box-shadow: 0rem 0.0833rem 0.3333rem 0rem rgba(0, 0, 0, 0.3);
        }
        .items {
          width: 100%;
          line-height: 30px;
          text-align: center;
          margin-right: 60px;
          ._item {
            color: #333;
            font-size: 16px;
            text-align: center;
            &:hover{
              color: #0085ff;
            }
            .title{
              font-size:12px;
            }
          }
        }
        .items:last-child{
          margin-right: 0px
        }
      }
    }
    .active-click{
      // color: #0085ff;
    }
    .active{
      color: #0085ff;
        .hoverDiv{
          display: block !important;
        }
        .el-icon-arrow-down{
         transform: rotate(180deg);
         transition:0.2s;
        }
      }
  }
}
.clearfix:after {
  content: "020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  /* 触发 hasLayout */
  zoom: 1;
}
</style>